// components/vehicle-number/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    //显示状态
    popupState: {
      type: Boolean,
      value: false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    //中文
    provinceList: [{
        name: '京',
        id: 1,
        className: 'item-box',
        disabled: false
      },
      {
        name: '津',
        className: 'item-box',
        disabled: false,
        id: 2
      },
      {
        name: '冀',
        className: 'item-box',
        disabled: false,
        id: 3
      },
      {
        name: '晋',
        className: 'item-box',
        disabled: false,
        id: 4
      },
      {
        name: '蒙',
        className: 'item-box',
        disabled: false,
        id: 5
      },
      {
        name: '辽',
        className: 'item-box',
        disabled: false,
        id: 6
      },
      {
        name: '吉',
        className: 'item-box',
        disabled: false,
        id: 7
      },
      {
        name: '黑',
        className: 'item-box',
        disabled: false,
        id: 8
      },
      {
        name: '沪',
        className: 'item-box',
        disabled: false,
        id: 9
      },
      {
        name: '苏',
        className: 'item-box',
        disabled: false,
        id: 10
      },
      {
        name: '浙',
        className: 'item-box',
        disabled: false,
        id: 11
      },
      {
        name: '皖',
        className: 'item-box',
        disabled: false,
        id: 12
      },
      {
        name: '闽',
        className: 'item-box',
        disabled: false,
        id: 13
      },
      {
        name: '赣',
        className: 'item-box',
        disabled: false,
        id: 14
      },
      {
        name: '鲁',
        className: 'item-box',
        disabled: false,
        id: 15
      },
      {
        name: '豫',
        className: 'item-box',
        disabled: false,
        id: 16
      },
      {
        name: '鄂',
        className: 'item-box',
        disabled: false,
        id: 17
      },
      {
        name: '湘',
        className: 'item-box',
        disabled: false,
        id: 18
      },
      {
        name: '粤',
        className: 'item-box',
        disabled: false,
        id: 19
      },
      {
        name: '桂',
        className: 'item-box',
        disabled: false,
        id: 20
      },
      {
        name: '琼',
        className: 'item-box',
        disabled: false,
        id: 21
      },
      {
        name: '渝',
        className: 'item-box',
        disabled: false,
        id: 22
      },
      {
        name: '川',
        className: 'item-box',
        disabled: false,
        id: 23
      },
      {
        name: '贵',
        className: 'item-box',
        disabled: false,
        id: 24
      },
      {
        name: '云',
        className: 'item-box',
        disabled: false,
        id: 25
      },
      {
        name: '藏',
        className: 'item-box',
        disabled: false,
        id: 26
      },
      {
        name: '陕',
        className: 'item-box',
        disabled: false,
        id: 27
      },
      {
        name: '甘',
        className: 'item-box',
        disabled: false,
        id: 28
      },
      {
        name: '青',
        className: 'item-box',
        disabled: false,
        id: 29
      },
      {
        name: '宁',
        className: 'item-box',
        disabled: false,
        id: 30
      },
      {
        name: '新',
        className: 'item-box',
        disabled: false,
        id: 31
      },
      {
        name: '港',
        className: 'item-box',
        disabled: false,
        id: 32
      },
      {
        name: '澳',
        className: 'item-box',
        disabled: false,
        id: 33
      },
      {
        name: '学',
        className: 'item-box',
        disabled: false,
        id: 35
      }
    ],
    //字母英文
    charList: [{
        name: '1',
        className: 'item-box',
        disabled: false,
        id: 1
      },
      {
        name: '2',
        className: 'item-box',
        disabled: false,
        id: 2
      },
      {
        name: '3',
        className: 'item-box',
        disabled: false,
        id: 3
      },
      {
        name: '4',
        className: 'item-box',
        disabled: false,
        id: 4
      },
      {
        name: '5',
        className: 'item-box',
        disabled: false,
        id: 5
      },
      {
        name: '6',
        className: 'item-box',
        disabled: false,
        id: 6
      },
      {
        name: '7',
        className: 'item-box',
        disabled: false,
        id: 7
      },
      {
        name: '8',
        className: 'item-box',
        disabled: false,
        id: 8
      },
      {
        name: '9',
        className: 'item-box',
        disabled: false,
        id: 9
      },
      {
        name: '0',
        className: 'item-box',
        disabled: false,
        id: 10
      },
      {
        name: 'Q',
        className: 'item-box',
        disabled: false,
        id: 11
      },
      {
        name: 'W',
        className: 'item-box',
        disabled: false,
        id: 12
      },
      {
        name: 'E',
        className: 'item-box',
        disabled: false,
        id: 13
      },
      {
        name: 'R',
        className: 'item-box',
        disabled: false,
        id: 14
      },
      {
        name: 'T',
        className: 'item-box',
        disabled: false,
        id: 15
      },
      {
        name: 'Y',
        className: 'item-box',
        disabled: false,
        id: 16
      },
      {
        name: 'U',
        className: 'item-box',
        disabled: false,
        id: 17
      },
      {
        name: 'N',
        className: 'item-box',
        disabled: false,
        id: 18
      },
      {
        name: 'M',
        className: 'item-box',
        disabled: false,
        id: 19
      },
      {
        name: 'P',
        className: 'item-box',
        disabled: false,
        id: 20
      },
      {
        name: 'A',
        className: 'item-box',
        disabled: false,
        id: 21
      },
      {
        name: 'S',
        className: 'item-box',
        disabled: false,
        id: 22
      },
      {
        name: 'D',
        className: 'item-box',
        disabled: false,
        id: 23
      },
      {
        name: 'F',
        className: 'item-box',
        disabled: false,
        id: 24
      },
      {
        name: 'G',
        className: 'item-box',
        disabled: false,
        id: 25
      },
      {
        name: 'H',
        className: 'item-box',
        disabled: false,
        id: 26
      },
      {
        name: 'J',
        className: 'item-box',
        disabled: false,
        id: 27
      },
      {
        name: 'K',
        className: 'item-box',
        disabled: false,
        id: 28
      },
      {
        name: 'L',
        className: 'item-box',
        disabled: false,
        id: 29
      },
      {
        name: 'Z',
        className: 'item-box',
        disabled: false,
        id: 30
      },
      {
        name: 'X',
        className: 'item-box',
        disabled: false,
        id: 31
      },
      {
        name: 'C',
        className: 'item-box',
        disabled: false,
        id: 32
      },
      {
        name: 'V',
        className: 'item-box',
        disabled: false,
        id: 33
      },
      {
        name: 'B',
        className: 'item-box',
        disabled: false,
        id: 34
      }
    ],
    //键盘数据
    keyboardList: [],
    numberCode: [], //车牌号码
    numberIndex: 0, //车牌号码激活下标
    isChinese: true, //语言状态 true 中文键盘 false 数字键盘
  },

  //数据监听
  observers: {
    //监听弹出框状态
    'popupState': function (value) {
      var that = this;
      if (value) {
        that.setData({
          keyboardList: that.data.provinceList
        })
      }
    },
    'isChinese': function (value) {
      var that = this;
      if (value) {
        that.setData({
          keyboardList: that.data.provinceList
        })
      } else {
        that.setData({
          keyboardList: that.data.charList
        })
      }
    },
    //监听数组下标
    'numberIndex': function (value) {
      var that = this;
      that.setData({
        isChinese: value > 0 ? false : true
      })
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    //取消数据
    onClosePopup() {
      var that = this;
      that.triggerEvent('onClose')
    },
    //确认数据
    onConfirmPopup() {
      var that = this;
      let codeReg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z](?:((\d{5}[A-HJK])|([A-HJK][A-HJ-NP-Z0-9][0-9]{4}))|[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳])$/;
      if(codeReg.test(that.data.numberCode.join(''))){
        that.triggerEvent('onConfirm',that.data.numberCode)
      }else{
        wx.showToast({
          title: '请输入正确的车牌号码',
          icon: 'none'
        })
      }
    },
    //选择语言
    onSelectLanguage() {
      var that = this;
      that.setData({
        isChinese: !that.data.isChinese
      })
    },
    //选择键盘
    onSelectCode(event) {
      var that = this;
      const {
        item
      } = event.currentTarget.dataset;
      let index = that.data.numberIndex;
      let list = that.data.numberCode;
      if (list.length < 8) {
        list.push(item.name);
      }
      if (index < 7) {
        index++
      }
      that.setData({
        numberCode: list,
        numberIndex: index
      })
    },
    //删除字符
    onClearCode() {
      var that = this;
      let list = that.data.numberCode;
      list.pop();
      that.setData({
        numberCode: list,
        numberIndex: list.length
      })
    },
    //清空数据
    onClearAllCode() {
      var that = this;
      that.setData({
        numberCode: [],
        numberIndex: 0,
        isChinese: true
      })
    }
  }
})